<template>
<div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
        <el-button type="primary" @click="showAddCateFn">添加分类</el-button>
        <tree-table :data="catelist" :columns="columns" :expand-type="false" :selection-type="false">
            <template slot="cat_deleted" slot-scope="scope">
                <i class="el-icon-success" v-if="scope.row.cat_deleted===false"></i>
                <i class="el-icon-error" v-else></i>
            </template>
            <template slot="cat_level" slot-scope="scope">
                <el-tag size="mini" type="primary" v-if="scope.row.cat_level===0">一级</el-tag>
                <el-tag size="mini" type="warning" v-else-if="scope.row.cat_level===1">二级</el-tag>
                <el-tag size="mini" type="danger" v-else>三级</el-tag>
            </template>
            <!-- eslint-disable-next-line  -->
            <template slot="opt" slot-scope="scope">
                <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                <el-button type="warning" size="mini" icon="el-icon-setting"></el-button>
            </template>
        </tree-table>
        <!-- 另一种写法 -->
        <el-table :data="catelist" style="width: 100%" row-key="cat_id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <!-- <el-table-column type="index" label="#" :index="1" /> -->
            <el-table-column prop="cat_name" label="分类名称" />
            <el-table-column label="是否有效">
                <template slot-scope="scope">
                    <i class="el-icon-success" v-if="!scope.row.cat_delete" style="color:#67C23A"></i>
                    <i class="el-icon-error" v-else style="color:#F56C6C"></i>
                </template>
            </el-table-column>
            <el-table-column prop="cat_level" label="排序">
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
                    <el-tag size="mini" type="warning" v-else-if="scope.row.cat_level===1">二级</el-tag>
                    <el-tag size="mini" type="danger" v-else>三级</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200px">
                <!-- eslint-disable-next-line vue/no-unused-vars -->
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1,2,3,4,5]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog title="添加分类" :visible.sync="addCateDialogVisible" width="30%" @close="resetAddFormFn">
        <el-form label-width="80px" ref="addCateFormRef">
            <el-form-item label="分类名称">
                <el-input v-model="addCateForm.cat_name"></el-input>
            </el-form-item>
            <el-form-item label="父级分类">
                <el-cascader :props="{ expandTrigger: 'hover',label:'cat_name',value:'cat_id',checkStrictly :true }" :options="parentCateList" clearable v-model="selectedParentKeys" @change="handleChange"></el-cascader>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addCateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveAddCateFn">确 定</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
// get,delete {params:参数}
// post,put {参数}
// 组件最好起个名字 名字最好是首字母大写
export default {
  // 方便我们调试
  name: 'Categories',
  data () {
    return {
      selectedParentKeys: [],
      parentCateList: [],
      addCateForm: {
        // 分类的名称
        cat_name: '',
        // 父级分类的id值
        // 打印出来的数组的最后一项 如果没有値就是0
        cat_pid: 0,
        // 0`表示一级分类；`1`表示二级分类；`2`表示三级分类
        // 如果没有选，值就是0
        // 如果选了，数组的长度刚好就是level的值
        cat_level: 0
      },
      addCateDialogVisible: false,
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      catelist: [],
      total: 0,
      columns: [{
        label: '分类名称',
        prop: 'cat_name'
      },
      // type:'template'表示当前这一列是作用域插槽
      // template:'cat_deleted' 插槽的名字 具名
      {
        label: '是否有效',
        prop: 'cat_deleted',
        type: 'template',
        template: 'cat_deleted'
      },
      {
        label: '排序',
        prop: 'cat_level',
        type: 'template',
        template: 'cat_level'
      },
      {
        label: '操作',
        type: 'template',
        template: 'opt'
      }
      ]
    }
  },
  created () {
    this.getCateList()
  },
  methods: {
    async saveAddCateFn () {
      // ajax操作 把network清空一下
      const {
        data: res
      } = await this.$http.post('categories', this.addCateForm)
      if (res.meta.status !== 201) return this.$message.error('添加失败')
      this.addCateDialogVisible = false
      this.getCateList()
    },
    resetAddFormFn () {
      this.addCateForm = {
        cate_name: '',
        cat_pid: 0,
        cat_level: 0
      }
      this.selectedParentKeys = []
    },
    handleChange () {
      console.log(this.selectedParentKeys)
      // 如果没有选，当前要添加的是一级分类
      if (this.selectedParentKeys.length === 0) {
        this.addCateForm.cat_pid = 0
        this.addCateForm.cat_level = 0
      } else {
        // 如果选了，规律：pid是数组的最后一项，level值是数组的长度
        this.addCateForm.cat_pid = this.selectedParentKeys.slice(-1)[0]
        this.addCateForm.cat_level = this.selectedParentKeys.length
      }
      console.log(this.addCateForm)
    },
    async getParentCateList () {
      const {
        data: res
      } = await this.$http.get('categories', {
        params: {
          type: 2
        }
      })
      if (res.meta.status !== 200) return this.$message.error('获取父级分类失败')
      console.log(res)
      this.parentCateList = res.data
    },
    showAddCateFn () {
      this.addCateDialogVisible = true
      this.getParentCateList()
    },
    async getCateList () {
      const {
        data: res
      } = await this.$http.get('categories', {
        params: this.queryInfo
      })
      console.log(res)
      if (res.meta.status !== 200) return this.$message.error('获取数据失败')
      this.total = res.data.total
      this.catelist = res.data.result
    },
    handleSizeChange (pagesize) {
      this.queryInfo.pagesize = pagesize
      this.getCateList()
    },
    handleCurrentChange (pagenum) {
      this.queryInfo.pagenum = pagenum
      this.getCateList()
    }
  },
  computed: {

  }
}
</script>

<style scoped>
.zk-table {
    margin-top: 20px;
}

.el-cascader {
    width: 100%;
}
</style>
